<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <div>名称:<input type="text" v-model="names"></div>
    <div>产地:<input type="text" v-model="citys"></div>
    <div>价格:<input type="text" v-model="prices"><button v-on:click="add()">添加</button></div>
    <hr>
    <p v-for="item in nameList" v-bind:key="item.name">
        <input type="checkbox">
        <span>name:{{item.name}},score:{{item.score}},class:{{item.class}}</span>
    </p>


</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ 
        data(){
          return{
            names:"",
            citys:"",
            prices:"",
            nameList:[
                {name:'洗衣机',city:'北京',price:'6800元'},
                {name:'冰箱',city:'上海',price:'8900元'},
                {name:'空调',city:'广州',price:'6800元'}
            ]
           }
         },
        methods:{
            add:function(){
                this.nameList.unshift({
                    name:this.names,
                    city:this.citys,
                    price:this.prices
                })
            }
        }
     }).mount('#app');
</script>

</body>
</html>
